<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="../../static/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../static/js/jquery.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <!-- 引入Vue分页 -->
    <link rel="stylesheet" href="../../static/vue-pagination/zpageNav.css"/>
    <script type="text/javascript" src="../../static/vue-pagination/zpageNav.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".click").click(function(){
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function(){
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function(){
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function(){
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>

<body>
<div class="place"> <span>位置：</span>
    <ul class="placeul">
        <li><a href="main.html">客房管理</a></li>
        <li><a href="#">客房类型管理</a></li>
    </ul>
</div>
<div class="rightinfo">
    <div class="tools">
        <ul class="toolbar">
            <li class="click"><span><img src="../../static/images/t01.png" /></span>添加</li>
            <li class="click"><span><img src="../../static/images/t02.png" /></span>修改</li>
            <li><span><img src="../../static/images/t03.png" /></span>删除</li>
        </ul>
    </div>
    <table class="tablelist">
        <thead>
        <tr>
            <th>选择</th>
            <th>编号</th>
            <th>房间类型</th>
            <th>房间单价</th>
        </tr>
        </thead>
        <tbody>

            <tr v-for="(map,index) in pageInfo.list">
                <td><input name="" type="checkbox" value="" /></td>
                <td>{{index+1}}</td>
                <td>{{map.room_type_name }}</td>
                <td>{{map.room_price}}</td>
            </tr>
        </tbody>
    </table>
    <!-- 把分页搞出来 -->
    <zpagenav v-bind:page="pageInfo.page" v-bind:page-size="pageInfo.pageSize" v-bind:total="pageInfo.total"
              v-bind:max-page="pageInfo.pages"  v-on:pagehandler="findRoomTypeInfo">
    </zpagenav>

    <div class="tip">
        <div class="tiptop"><span>提示信息</span><a></a></div>
        <div class="tipinfo"> <span><img src="../../static/images/ticon.png" /></span>
            <div class="tipright">
                <form>
                    <table>
                        <tr>
                            <td>房间类型名：</td>
                            <td><input type="text" name="room_type_name" /></td>
                        </tr>
                        <tr>
                            <td>房间单间：</td>
                            <td><input type="text" name="room_price" /></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="tipbtn">
                <input name="" type="button"  class="sure" value="确定" />
                &nbsp;
                <input name="" type="button"  class="cancel" value="取消" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    const vue1 = new Vue({
        el: ".rightinfo",
        data: {
            pageInfo: {},
        },
        methods: {
            getByCon() {
                var jsonData = {
                    "aaa": $("#keyword").val()
                }
                var jsonData = '{"' + $("#keyword").attr("name") + '":"' + $("#keyword").val() + '"}';
                jsonData = JSON.parse(jsonData);
                console.log(jsonData)
                this.$http.post("/findRoomTypeInfo.do", jsonData, {emulateJSON: true}).then(
                    function (rs) {
                        this.pageInfo = rs.body;
                    }
                );
            },
            findRoomTypeInfo(page) {
                this.$http.post("/getHouseManage.do?pageNum=" + page).then(
                    function (rs) {
                        this.pageInfo = rs.body;
                    }
                );
            }
        },
        watch: {
            pageInfo() {

            },
        },
        mounted() {
            this.findRoomTypeInfo(1);
        }
    });
</script>
    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>
</body>
</html>
